<template>
    <a-form
    ref="formRef"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
    :model="expItems"
  >
    <a-row :gutter="22" style="margin-left: 0px;margin-right: 0px;">
        <a-col :span="22">
            <a-form-item v-if="expItems.NO!==''&&expItems.NO!==undefined" label="处理人类型" name="NO">
                <a-select
                    ref="select"
                    v-model:value="expItems.NO"
                    disabled
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in itemData"  
                        :key="opt.NO"  
                        :value="opt.NO"  
                    >  
                        {{ opt.NAME }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.NO==='byMultiLevelLeader'" label="处理人" name="mulLeaderSubDataType">
                <a-select
                    ref="select"
                    v-model:value="expItems.mulLeaderSubDataType"
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in multiOptios"  
                        :key="opt.NO"  
                        :value="opt.NO"  
                    >  
                        {{ opt.NAME }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.mulLeaderSubDataType==='byMultiLevelSationLeader'" label="指定岗位" name="orgData">
                <div style="border: 1px solid #e6e8eb;display: flex;justify-content: space-between;align-items: center;width:100%">
                    <a-space style="padding-left: 5px;">
                        <div style="overflow: auto;" class="tagboxs">
                            <a-tag closable @close="handleClose(expItems,tag)" v-for="tag in expItems.orgData" :key="tag">
                                {{ tag.NAME }}
                            </a-tag>
                        </div>
                    </a-space>
                    <a-button style="width: 3vw;" :icon="h(UserOutlined)" @click="openCommModal(expItems)"></a-button>
                </div>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.mulLeaderSubDataType==='byMultiLevelSationLeader'" label="层级" name="nodeData">
                <a-select
                    ref="select"
                    v-model:value="expItems.stationLevel"
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in multiStationOptions"  
                        :key="opt.value"  
                        :value="opt.value"  
                    >  
                        {{ opt.label }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.mulLeaderSubDataType==='byAddressBookLeader'" label="层级" name="nodeData">
                <a-select
                    ref="select"
                    v-model:value="expItems.bookLevel"
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in multiAddressBookOptions"  
                        :key="opt.value"  
                        :value="opt.value"  
                    >  
                        {{ opt.label }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22" style="text-align: right">
          <a-button v-if="expItems.NO!==''&&expItems.NO!==undefined" type="primary" @click="handleSubmit(expItems)">添加设置</a-button>
        </a-col>
    </a-row>
  </a-form>
  </template>
  <script setup lang="tsx">
    import { ref, reactive, onMounted, h, unref } from 'vue';
    import {createItemData,multiLevelOptions} from '@/components/setting/subComponents/expItems';
    import { UserOutlined } from '@ant-design/icons-vue';
    import { useModal } from '@/hooks/useModal/useModal';
    import SettingOrg from '@/components/setting/assigneeSetting.vue';

    interface Props {
        defaultData?: any;
    }
    const props = withDefaults(defineProps<Props>(), {
        defaultData: [{
            NO: '',
            NAME: '',
            ORG_TYPE: '',
            nodeData:'',
            orgData:[],
            userSubDataType:'',
            userFormKey:'',
        }]
  });
  defineOptions({
    name: 'byMultilevelLeader',
  });
  onMounted(()=>loadInfo());
  const emit = defineEmits(['updateValue']);  
    const editFormRef = ref<any>(null);
    const editDrawerBindValue = reactive({
        defaultSelectData: [],
        runType:''
    });
    const expItems = ref({
        NO: '',
        NAME: '',
        ORG_TYPE: '',
        nodeData:'',
        stationLevel:'',
        bookLevel:'',
        orgData:[],
        mulLeaderSubDataType:'',
        userFormKey:'',
    });
    const resetExpItems=ref({
      NO: '',
      NAME: '',
      ORG_TYPE: '',
      nodeData:'',
      stationLevel:'',
      bookLevel:'',
      orgData:[],
      mulLeaderSubDataType:'',
      userFormKey:'',
    });
    interface State {
        settingData:any;
    }
    const state = reactive<State>({
        settingData:[],
    });
    const [ModalRender, modalRef] = useModal();
    //选择列表
    const selectDatas=ref<any>([]);
    //规则列表/选择项
    const itemData=createItemData();
    //连续多级主管选择项
  const multiOptios=multiLevelOptions();
  const multiStationOptions=ref(Array.from({ length: 20 }, (_, i) => ({
    value: i + 1,
    label: `第${i + 1}级主管`,
  })));
  const multiAddressBookOptions=ref(Array.from({ length: 21 }, (_, i) => {
    if(i==0){
      return {
        value: 0,
        label: `最高层级主管`,
      }
    }
    else{
      return {
        value: i,
        label: `第${i}层级主管`,
      }
    }
  }));
  const openCommModal = async(record)=>{
    editDrawerBindValue.runType="2";
    editDrawerBindValue.defaultSelectData=[];
      ModalRender.show({
        title: '选择公共岗',
        width: '70%',
        // 是否显示右上角确定取消
        defaultExtra: true,
        destroyOnClose: true,
        content: () => {
          return <SettingOrg  ref={editFormRef} defaultData={unref(editDrawerBindValue)}></SettingOrg>;
        },
        // 确定方法执行
        onOk: async (values) => {
          const res = await editFormRef.value?.handleSubmit();
          console.log(res);
          if (!res) return;
          record.orgData=res;
        },
      });
    };
    //删除组织结构标签
  const handleClose=(record,tag)=>{
    record.orgData=record.orgData.filter((item)=>item.NO!==tag.NO);
    const index = selectDatas.value.findIndex(item => item.index === record.index); 
    if (index !== -1) {  
      Object.assign(selectDatas.value[index], record);  
    }
  }
    const loadInfo=()=>{
        expItems.value=props.defaultData;
    }
  //点击确认
  const handleSubmit=(record)=>{
    const setValue={
      NO:record.NO,
      NAME:record.NAME,
      ORG_TYPE:record.NO,
      DATA:record,
    }
    state.settingData.push(setValue);
    emit('updateValue', state.settingData); 
    console.log(record,"record3333");
    //重置设置页面
    Object.assign(expItems, resetExpItems.value);
  }
</script>